<template>
  <div>
    <ex-dialog width="1000px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose"
      :closeOnClickModal="false">
      <el-form ref="form" :model="ruleForm" :rules="rules" label-width="140px" :disabled="status==1?true:false">
        <el-form-item label="扫码支付费率:" prop="fee">
          <el-input v-model="ruleForm.fee" placeholder="请输入">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="submitLoading" v-if="status==''">提交变更申请</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading" v-if="status==3">重新提交变更申请</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </ex-dialog>
  </div>

</template>
<script>
  import {
    fundChangeFee,
    getFundChangeFee,
    updateFundChangeFee,
  } from "@/api/merchants";
  export default {
    props: {
      //   visible: Boolean,
      //   id: String,
      //   pathType: String,
    },
    components: {

    },
    data() {
      var checkFee = (rule, value, callback) => {
        var reg = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/
        if (value === '') {
          callback(new Error('请输入扫码支付费率'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入大于等于0最多保留两位小数且小于等于100的数值'));
        } else {
          callback()
        }
      };
      return {
        visible: false,
        fundAccountId: '', //
        type: '', //类型 1：日常消费  2： 存管账户
        status: '', //1 审核中 3: 失败  ''：申请
        refusedDialog: false,
        title: '',
        submitLoading: false,
        ruleForm: {
          fee: '', //费率（单位：百分比）
          fundAccountId: '', //资金帐号id
          id: '', //id，更新的时候传
        },
        rules: {
          fee: [{
            required: true,
            // message: '请输入扫码支付费率',
            validator: checkFee,
            trigger: ['change', 'blur']
          }, ],
        }
      }
    },
    watch: {},
    created() {

    },
    methods: {
      open(id, type, status) {
        console.log('id=', id, 'type=', type, 'status=', status)
        this.fundAccountId = id
        this.type = type
        this.status = status
        this.reset()
        if (this.type == 1 && this.status == 1) {
          this.title = '日常消费账户费率信息变更（审核中）'
        } else if (this.type == 1 && this.status == 3) {
          this.title = '日常消费账户费率信息变更（失败）'
        } else if (this.type == 1 && this.status == '') {
          this.title = '日常消费账户费率信息变更（申请）'
        } else if (this.type == 2 && this.status == 1) {
          this.title = '存管账户费率信息变更（审核中）'
        } else if (this.type == 2 && this.status == 3) {
          this.title = '存管账户费率信息变更（失败）'
        } else if (this.type == 2 && this.status == '') {
          this.title = '存管账户费率信息变更（申请）'
        }
        this.visible = true
        this.getDetail()
      },
      // 表单重置
      reset() {
        this.ruleForm = {
          fee: '', //费率（单位：百分比）
          fundAccountId: '', //资金帐号id
          id: '', //id，更新的时候传
        }
      },
      //信息查询
      getDetail() {
        getFundChangeFee(this.fundAccountId).then(res => {
          const {
            result
          } = res
          this.ruleForm = result
        })
      },
      handleClose() { //关闭弹窗
        // this.$emit('update:visible', false)
        this.$refs['form'].resetFields();
        this.visible = false
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.submitLoading = true
            this.ruleForm.fundAccountId = this.fundAccountId
            var data = {
              ...this.ruleForm
            }
            console.log('this.ruleForm.id', this.ruleForm.id)
            if (this.ruleForm.id == '') {
              fundChangeFee(data).then(response => {
                this.$message.success('操作成功');
                setTimeout(() => {
                  this.handleClose()
                  this.$emit('success')
                  this.submitLoading = false
                }, 800)
              }).catch(() => {
                this.submitLoading = false
              });
            } else {
              updateFundChangeFee(data).then(response => {
                this.$message.success('操作成功');
                setTimeout(() => {
                  this.handleClose()
                  this.$emit('success')
                  this.submitLoading = false
                }, 800)
              }).catch(() => {
                this.submitLoading = false
              });
            }

          }
        });
      },
    }
  }

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
    }

    .grid-layout {
      width: 560px;
      margin: 0 auto;
    }

    .img {
      display: block;
      width: 100px;
      height: auto;
    }
  }

  .max_title {
    font-size: 18px;
    color: #1890ff;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    border-bottom: 3px solid #1890ff;
    width: 750px;
    margin-bottom: 20px;
  }

  .el-input {
    width: 300px;
  }

  .el-select {
    width: 300px;
  }

  .dialog-footer .el-button {
    margin: 0 10px !important;
  }

</style>
